<template>
  <main-layout>
    <div class="allCategory">
      <van-nav-bar
      title="全部分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      ></van-nav-bar>
      <div class="allcategory-top">
        <div class="top">
          <span class="top-left">服装</span>
          <span class="top-right">更多>>></span>
        </div>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in 7"
            :key="value"
            icon="smile-comment"
            text="文字"
          />
        </van-grid>
      </div>
      <div class="allcategory-top">
        <div class="top">
          <span class="top-left">水果</span>
          <span class="top-right">更多>>></span>
        </div>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in 7"
            :key="value"
            icon="smile-comment"
            text="文字"
          />
        </van-grid>
      </div>
      <div class="allcategory-top">
        <div class="top">
          <span class="top-left">服装</span>
          <span class="top-right">更多>>></span>
        </div>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in 7"
            :key="value"
            icon="smile-comment"
            text="文字"
          />
        </van-grid>
      </div>
      <div class="allcategory-top">
        <div class="top">
          <span class="top-left">水果</span>
          <span class="top-right">更多>>></span>
        </div>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in 7"
            :key="value"
            icon="smile-comment"
            text="文字"
          />
        </van-grid>
      </div>
    </div>
  </main-layout>
</template>

<script>
export default {
  name: 'AllCategory',
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.allCategory {
  .allcategory-top {
    background: #fff;
    .top {
      // margin: 10px;
      height: 40px;
      line-height: 40px;
      margin: 0 10px;

      .top-left {
        font-size: 16px;
        color: rgb(99, 97, 97);
      }
      .top-right {
        font-size: 14px;
        float: right;
        color: rgb(161, 157, 157);
      }
    }
  }
}
</style>
